<template>
  <div class="login">
    
    <video muted autoplay loop playsinline>
      <source src="@/assets/images/login-video.mp4" />
    </video>
    <el-form :model="loginForm" class="login-form" label-position="top">
      <h3 class="title">Log in</h3>
      <el-form-item prop="username" label="Email address">
        <el-input
          v-model="loginForm.username"
          type="text"
          placeholder="Email address"
        >
        </el-input>
      </el-form-item>
      <el-form-item prop="password" label="password">
        <el-input
          v-model="loginForm.password"
          type="password"
          placeholder="password"
        >
        </el-input>
      </el-form-item>
      <!-- <el-link style="margin-bottom: 5px">Forget password?</el-link> -->
      <el-form-item style="width: 100%">
        <el-button
          size="medium"
          type="primary"
          style="width: 100%"
          :disabled="disabled"
          @click="handleLogin"
        >
          <span>Log in </span>
        </el-button>
        <!-- <div style="float: right" v-if="register">
          <router-link class="link-type" :to="'/register'"
            >立即注册</router-link
          >
        </div> -->
      </el-form-item>
    </el-form>
  </div>
</template>

<script setup>
import { ref, reactive, computed } from 'vue'
import { useRouter } from 'vue-router'
import Fingerprint2 from 'fingerprintjs2'
import { login } from '@/api/login'
import { setToken } from '@/utils/auth'
const router = useRouter()
let excludes = {}
let options = {
  excludes: excludes,
}
let murmur
// Fingerprint2.get(options, function (components) {
//   // 参数
//   const values = components.map(function (component) {
//     return component.value
//   })
//   // 指纹
//   murmur = Fingerprint2.x64hash128(values.join(''), 31)
// })
const loginForm = reactive({
  // username: 'xiaoyouqi22',
  // password: 'admin123',
  username: '',
  password: '',
})
// let networkInterfaces =
//   window.navigator.userAgentData?.brands[0]?.branded?.networkInterfaces
// for (let net of networkInterfaces) {
//   if (net?.mac !== undefined && net?.mac !== null) {
//     murmur = net.mac
//     break
//   }
// }
if (window.QClient) {
  QClient.syncInvokeMethod('GetMac')
  QClient.invokeMethod('GetMac', function (ret) {
    // localStorage.setItem('GetMac', ret.data)
    murmur = ret.data
  })
}

const handleLogin = () => {
  login({
    ...loginForm,
    // deviceNumber: murmur,
  }).then((res) => {
    setToken(res.data)
    // sessionStorage.setItem('Token', res.data.accessToken)
    router.push('./index')
  })
}

const disabled = computed(() => {
  return !(loginForm.username && loginForm.password)
})
computed
</script>

<style  lang="scss">
.login {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
  // background-image: url('@/assets/images/login.png');
  // background-size: cover;
  video {
    width: 100%;
    height: auto;
    background-size: cover;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 100;
  }
}
.title {
  margin: 0px auto 30px auto;
  text-align: center;
  color: #707070;
}
.login-form {
  z-index: 200;
  border-radius: 24px 24px 24px 24px;
  background: #ffffff;
  width: 400px;
  padding: 40px;
  .el-input {
    height: 38px;
    input {
      height: 38px;
    }
  }
  .input-icon {
    height: 39px;
    width: 14px;
    margin-left: 2px;
  }
}
.login-tip {
  font-size: 13px;
  text-align: center;
  color: #bfbfbf;
}
.login-code {
  width: 33%;
  height: 38px;
  float: right;
  img {
    cursor: pointer;
    vertical-align: middle;
  }
}
.el-login-footer {
  height: 40px;
  line-height: 40px;
  position: fixed;
  bottom: 0;
  width: 100%;
  text-align: center;
  color: #fff;
  font-family: Arial;
  font-size: 12px;
  letter-spacing: 1px;
}
.login-code-img {
  height: 38px;
}
@media screen and (max-width: 1000px) {
  .login {
    display: block;
    video {
      position: relative;
    }
    .login-form {
      // margin-top: 45%;
      width: 80%;
      // position: absolute;
    }
  }

  video {
    // display: none;
  }
}
</style>
